<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        .a{
            height: 100px;
            width: 100px;
        }
        .b{
            height: 200px;
            width: 200px;
            background-color: brown;
        }
    </style>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于类名的样式不确定，需要动态指定 -->
        <div :class="a">{{c}}</div>
        <button @click="changeCss">点我</button>
        <!-- 绑定class样式--数组写法，个数名字不确定，多个样式组合就在data里面写一个数组，然后通过对数组进行操作进行样式操作 -->
        <div :class="arr">绑定多个样式</div>
        <!-- 绑定class样式--对象写法，个数名字确定，那就用对象的形式，都写入一个对象，用true，false判断 -->
        <div :class="classObj">局限两个，可能都有</div>

        <!-- 绑定style样式，注意'’内要加vue中的对象 属性要用驼峰表示，别的字符要加'’，隔开用,-->
        <!-- style也可以用数组，数组里面放的是style样式对象 -->
        <div :style="{fontSize:fsize+'px',backgroundColor:'red'}">style属性来绑定样式</div>
        <div style="font-size:40px ;background-color: red;">区别以上</div>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            a:'a',
            c:'abc',
            arr:[],
            classObj:{
                a:false,
                b:false
            },
            fsize:40
        },
        methods:{
            changeCss(){//将要修改的属性前加:，vue就会参与解析，之后去data找该class实际对应的css选择器，通过方法修改data里面的数据就可以修改对应的选择器
                this.a='b'//绑定样式后面的css名字要加''
            }
        }
    })
    </script>
</body>
</html>